<script setup>
    import { ref } from 'vue'
    import axios from 'axios'
    import Header from './common/header.vue'

    const article_list = ref([])
    const get_news_articles = ()=>{ 

        let url = 'http://api.ddhk.net/api/cms.article.index?category=news';
        axios.get( url ).then( (res)=>{ 

            article_list.value = res.data.list
        })
    }

    get_news_articles();
</script>

<template>
    <Header></Header>


    <main class="main-content js-main-content">


        <div class="banner lazy entered" data-lazy-function="loadBgImage" data-ll-status="entered">
            <div class="container banner__wrapper">
                <div class="banner__upper">
                    <span class="banner__label">新闻</span>
                    <h1 class="banner__title">最新新闻</h1>
                </div>

            </div>
        </div>

        <div class="container blogs">
            <div class="blogs__items" >

                
                <div class="blogs__item" v-for="item,index in article_list" :key="index">
                    <div class="blogs__description">
                        <a class="news_link" :href=" item.out_link ? item.out_link : '/article/'+item.id " >
                            <span class="blogs__title">{{ item.title }}</span>
                            <p class="blogs__text">{{ item.content }}</p>
                            <div class="blogs__footer">
                                <div class="blogs__date">{{ item.public_time.split(' ')[0] }}</div>
                            </div>                        
                        </a>

                    </div>
                </div>





                <div class="blogs__loadmore" style="display: none;">
                    <a href="/zh-hans/manufacturing-in-china-news/?ufprt=CfDJ8Cs3eIoS6C1MntR3FMqoAiupAbbdYcGjym-LNzM2PGjTZtcZxjbh8IH-OP1_47Gu5xYRiKQKg3_Z5Op5NqamwajwxXDpYFEVxZDCrqk47m0GlzqDiPX9nDlA6MIsRCLi4qA1WKarbeoWqN-yJ0oPYP7CVAna05xF0evjZU3t2UBHGiuXNhUi7K2EQPOanOwxVA"
                    class="load-more-button" data-loadmore="" rel="nofollow">加载更多</a>
            </div>


        </div>
    </div>

</main>

<Footer></Footer></template> 